// 分散拉伸
.disperseStretch {
    animation-name: disperseStretch;
}
@keyframes disperseStretch {
    0%{
        mask: radial-gradient(circle at 50% 0, #000, transparent 20%, transparent 0);
        mask-size: 100% 100%;
    }
    50%,
    100% {
        mask-size: 100% 2000%;
    }
}
// 左覆盖
.leftOverlay{
    animation-name: leftOverlay;
}
@keyframes leftOverlay{
    0%{
        mask: radial-gradient(circle at 0 50%, #000, transparent 10%, transparent 0);
        mask-size: 100%;
    }
    50%,
    100% {
        mask-size: 2000%;
    }
}
// 右覆盖
.rightOverlay{
    animation-name: rightOverlay;
}
@keyframes rightOverlay {
    0%{
        mask: linear-gradient(to left, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to left, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to left, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to left, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to left, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to left, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to left, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to left, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to left, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to left, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to left, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 上覆盖
.upOverlay{
    animation-name: upOverlay;
}
@keyframes upOverlay {
    0%{
        mask: linear-gradient(to bottom, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to bottom, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to bottom, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to bottom, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to bottom, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to bottom, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to bottom, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to bottom, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to bottom, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to bottom, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to bottom, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 下覆盖
.downOverlay{
    animation-name: downOverlay;
}
@keyframes downOverlay {
    0%{
        mask: linear-gradient(to top, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to top, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to top, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to top, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to top, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to top, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to top, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to top, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to top, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to top, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to top, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 左上覆盖（斜线）
.leftUpOverlay{
    animation-name: leftUpOverlay;
}
@keyframes leftUpOverlay {
    0%{
        mask: linear-gradient(to bottom right, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to bottom right, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to bottom right, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to bottom right, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to bottom right, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to bottom right, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to bottom right, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to bottom right, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to bottom right, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to bottom right, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to bottom right, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(45deg, #000, #000 100%);
    }
}
// 右上覆盖（斜线）
.rightUpOverlay{
    animation-name: rightUpOverlay;
}
@keyframes rightUpOverlay {
    0%{
        mask: linear-gradient(to bottom left, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to bottom left, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to bottom left, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to bottom left, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to bottom left, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to bottom left, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to bottom left, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to bottom left, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to bottom left, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to bottom left, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to bottom left, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(45deg, #000, #000 100%);
    }
}
// 左下覆盖（斜线）
.leftDownOverlay{
    animation-name: leftDownOverlay;
}
@keyframes leftDownOverlay {
    0%{
        mask: linear-gradient(to top right, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to top right, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to top right, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to top right, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to top right, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to top right, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to top right, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to top right, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to top right, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to top right, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to top right, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(45deg, #000, #000 100%);
    }
}
// 右下覆盖（斜线）
.rightDownOverlay{
    animation-name: rightDownOverlay;
}
@keyframes rightDownOverlay {
    0%{
        mask: linear-gradient(to top left, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to top left, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to top left, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to top left, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to top left, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to top left, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to top left, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to top left, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to top left, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to top left, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to top left, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(45deg, #000, #000 100%);
    }
}
// 左上覆盖（直线）
.leftUpOverlay2{
    animation-name: leftUpOverlay2;
}
@keyframes leftUpOverlay2 {
    0%{
        mask: linear-gradient(to bottom right, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to bottom right, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to bottom right, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to bottom right, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to bottom right, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to bottom right, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to bottom right, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to bottom right, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to bottom right, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to bottom right, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to bottom right, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 右上覆盖（直线）
.rightUpOverlay2{
    animation-name: rightUpOverlay2;
}
@keyframes rightUpOverlay2 {
    0%{
        mask: linear-gradient(to bottom left, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to bottom left, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to bottom left, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to bottom left, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to bottom left, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to bottom left, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to bottom left, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to bottom left, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to bottom left, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to bottom left, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to bottom left, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 左下覆盖（直线）
.leftDownOverlay2{
    animation-name: leftDownOverlay2;
}
@keyframes leftDownOverlay2 {
    0%{
        mask: linear-gradient(to top right, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to top right, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to top right, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to top right, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to top right, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to top right, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to top right, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to top right, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to top right, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to top right, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to top right, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}
// 右下覆盖（直线）
.rightDownOverlay2{
    animation-name: rightDownOverlay2;
}
@keyframes rightDownOverlay2 {
    0%{
        mask: linear-gradient(to top left, #000 0%, transparent 0%);
    }
    5%{
        mask: linear-gradient(to top left, #000 10%, transparent 12.5%);
    }
    10%{
        mask: linear-gradient(to top left, #000 20%, transparent 25%);
    }
    15%{
        mask: linear-gradient(to top left, #000 30%, transparent 37.5%);
    }
    20%{
        mask: linear-gradient(to top left, #000 40%, transparent 50%);
    }
    25%{
        mask: linear-gradient(to top left, #000 50%, transparent 62.5%);
    }
    30%{
        mask: linear-gradient(to top left, #000 60%, transparent 75%);
    }
    35%{
        mask: linear-gradient(to top left, #000 70%, transparent 87.5%);
    }
    40%{
        mask: linear-gradient(to top left, #000 80%, transparent 100%);
    }
    45%{
        mask: linear-gradient(to top left, #000 90%, transparent 112.5%);
    }
    50%{
        mask: linear-gradient(to top left, #000 100%, transparent 125%);
    }
    100%{
        mask: linear-gradient(90deg, #000, #000 100%);
    }
}

.hideHeight{
    animation-name: hideHeight;
}
@keyframes hideHeight {
    to{
        height: 0px;
    }
}
.hideWidth{
    animation-name: hideWidth;
}
@keyframes hideWidth {
    to{
        width: 0px;
    }
}
.hideWidthHeight{
    animation-name: hideWidthHeight;
}
@keyframes hideWidthHeight {
    to{
        width: 0;
        height: 0;
    }
}
.hideWidthHeightRect{
    animation-name: hideWidthHeightRect;
}
@keyframes hideWidthHeightRect {
    90%{
        height: 0;
    }
    100%{
        width: 0;
    }
}
.hideWidthHeightDia{
    animation-name: hideWidthHeightDia;
}
@keyframes hideWidthHeightDia {
    
}